import React, { useState, useRef, useCallback } from "react";

// 定义 Hook 的返回类型
type UseSyncStateReturn<T> = [
	T, // 当前状态值 (用于渲染)
	(newValue: T | ((prevValue: T) => T)) => void, // 设置状态的函数
	() => T // 获取最新状态的函数
];

// 自定义 Hook：解决 useState 异步更新问题
function useSyncState<T>(initialValue: T): UseSyncStateReturn<T> {
	// 使用 ref 存储实时状态值
	const stateRef = useRef<T>(initialValue);

	// 使用 state 触发重新渲染
	const [state, setState] = useState<T>(initialValue);

	// 更新状态的函数
	const setSyncState = useCallback((newValue: T | ((prevValue: T) => T)) => {
		// 如果是函数形式，传入当前最新值
		if (typeof newValue === "function") {
			// 使用类型断言确保正确类型
			const updater = newValue as (prevValue: T) => T;
			stateRef.current = updater(stateRef.current);
		} else {
			stateRef.current = newValue;
		}
		// 触发重新渲染
		setState(stateRef.current);
	}, []);

	// 获取最新状态的函数
	const getSyncState = useCallback(() => stateRef.current, []);

	return [state, setSyncState, getSyncState];
}
export default useSyncState;
